<template>
  <div class="search-container">
    <div class="search-wrap">
      <!-- logo -->
      <div class="logo">
        <router-link to="/portal" target="_blank">
          <img src="@/assets/logo.png" />
        </router-link>
      </div>
      <!-- 搜索框和推荐列表 -->
      <div class="search">
        <el-input placeholder="搜索宝贝" v-model="searchText">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
          <transition name="fade" slot="suffix">
            <span
              v-show="searchText"
              @click="searchText = ''"
              class="iconfont icon-close"
            ></span>
          </transition>
          <span slot="append" class="search-btn">搜索</span>
        </el-input>
        <div class="recommend-wrap">
          <ul class="ul-wrap">
            <li class="recommend-item">新款连衣裙</li>
            <li class="recommend-item">四件套</li>
            <li class="recommend-item">潮流T恤</li>
            <li class="recommend-item">时尚女鞋</li>
            <li class="recommend-item">短裤</li>
            <li class="recommend-item">半身裙</li>
            <li class="recommend-item">男士外套</li>
            <li class="recommend-item">墙纸</li>
            <li class="recommend-item">行车记录仪</li>
          </ul>
        </div>
      </div>
      <!-- 购物车 -->
      <div class="cart">
        <i class="iconfont icon-gouwuche-kong" @click="toCart">
          <span class="cartCount">{{ cartList.length }}</span>
        </i>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "SearchIndex",
  props: {
    cartList: {
      type: Array,
      required: true,
    },
  },
  components: {},
  data() {
    return {
      searchText: "", // 搜索关键字
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 跳转到购物车页面
    toCart() {
      if (!this.user) {
        return this.$router.push("/login");
      }
      this.$router.push("/cart");
    },
  },
  computed: {
    ...mapState(["user"]),
  },
};
</script>

<style lang="less" scoped>
/* logo、搜索框、推荐列表的wrap */
.search-container {
  :deep(.search-wrap) {
    width: 85%;
    margin: 0 auto;
    height: 140px;
    // background-color: aquamarine;
    display: flex;
    justify-content: space-around;
    align-items: center;

    /* logo */
    .logo {
      flex: 1;
      margin-left: 100px;

      img {
        height: 80px;
      }
    }

    /* 右边搜索框和推荐列表 */
    .search {
      flex: 2;
      display: flex;
      flex-direction: column;

      // 设置搜索框整体宽度
      .el-input {
        width: 710px;

        /* 真正搜索框 */
        .el-input__inner {
          // 设置搜索框边角
          height: 50px;
          border-radius: 50px;
          border: 3px solid #ff5100;
          padding-left: 40px;
          padding-right: 60px;
          font-size: 16px;
        }

        /* 搜索图标 */
        .el-input__prefix {
          width: 40px;
          font-size: 20px;

          .el-icon-search {
            width: 100%;
          }
        }

        /* 清空内容按钮 */
        .el-input__suffix {
          width: 50px;
          height: 100%;
          line-height: 50px;

          .el-input__suffix-inner {
            position: relative;
            left: -10px;

            .icon-close {
              font-size: 30px;
            }
          }
        }

        /* v-show配合transition 让清空文本有过渡效果 */
        .fade-enter-active,
        .fade-leave-active {
          transition: opacity 0.3s;
        }

        .fade-enter,
        .fade-leave-to {
          opacity: 0;
        }

        /* 搜索按钮 */
        .el-input-group__append {
          position: relative;
          left: -20px;
          border: unset;
          text-align: center;
          width: 70px;
          padding: unset;
          background-color: #ff4746;
          font-size: 16px;
          color: #fff;
          cursor: pointer;
        }
      }

      .recommend-wrap {
        position: relative;
        top: 20px;

        .ul-wrap {
          li.recommend-item {
            color: #666666;
            font-size: 13px;
            margin-left: 20px;
            float: left;
          }

          li.recommend-item:hover {
            cursor: pointer;
            color: #ff4746;
          }
        }
      }
    }

    /* 购物车 */
    .cart {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #e62918;

      .iconfont {
        cursor: pointer;
        font-size: 45px;
        position: relative;

        .cartCount {
          position: absolute;
          top: 0;
          right: -10px;
          font-size: 16px;
          background: red;
          color: white;
          border-radius: 45%;
          display: block;
          width: 25px;
          height: 16px;
          text-align: center;
          line-height: 16px;
        }
      }
    }
  }
}
</style>
